<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
	<g:javascript>
		var sid;
		$(document).ready(function(){
			$("#autocomplete").autocomplete({
				source: function(request, response) {
			        $.ajax({
			            url: "${createLink(controller:'ajax', action: 'moctb')}",
			            data: { term: request.term },
			            dataType: "json",
			            type: "POST",
			            success: function( data ) {
			            	response( $.map( data, function( item ) {
								return {
									  value: item[1]
									, label: item[1]
									, id : item[0]
								}
							}));
			            }
			        });
			    }
				,select: function( event, ui ) {
					sid = ui.item.id;
				}
			});
		});
		
		function createTc(){
			if(sid){
				window.open( "tc/create?tb_id=" + sid, "createTc" + sid)
			}
		}
		function showTb(){
			if(sid){
				window.open( "tb/show?id=" + sid, "showTb" + sid)
			}
		}
	</g:javascript>
</head>
<body>
<div class="body">
	<g:form name="find" >
		<%-- Text field supporting autocomplete --%>
		<input type="text" class="search" id="autocomplete"/>
		<input type="button" class="btnImportant" onclick="createTc();" value="${message(code: 'default.add.label', args: [message(code: 'moc.tc.label', default: 'Tc')])}"/>
		<input type="button" class="btnImportant" onclick="showTb();" value="${message(code: 'default.show.label', args: ['\u5de5\u5355'])}"/>
	</g:form>
</div>
</body>
</html>
